<template>
  <div id="wi">
    <el-tabs class="wi_tab" type="border-card" >
      <el-tab-pane label="我的笔试">
        <div class="sub-li">
          <div class="sub-li-right">
            <div>
              <div class="company_img">
                <img style="width:60px;height:60px"
                     src="https://img.bosszhipin.com/beijin/upload/com/workfeel/20220411/7bf6f160950405e93ad8e7923ab65e0ffbe11dfef94ce4d5f0ae9ca6c9ad6e7580cb0497f5dfa98e.jpg?x-oss-process=image/resize,w_100,limit_0"
                     alt="">
              </div>
              <div class="company-info">
                <h3><span>美团2022校园招聘软件工程师笔试题</span></h3>
                <p class="company_text">
                  <span style="color:#4f4e4e;font-size:14px;padding-right: 20px">美团</span>
                  10000人以上
                  <el-divider direction="vertical"></el-divider>
                  互联网
                  <el-divider direction="vertical"></el-divider>
                  国企
                  <el-divider direction="vertical"></el-divider>
                  已上市
                </p>
              </div>
              <div class="delivery_tag"><el-tag>未完成</el-tag></div>
              <el-divider direction="horizontal"></el-divider>
              <p class="company_text" >
                笔试职位：<span>Java开发工程师</span>
                <span style="position:absolute;top:0;left:45%;">题目数量：<span>30</span>道</span>
                <span style="float: right">到期时间 2022-05-21</span>
              </p>
            </div>
          </div>
        </div>
        <el-pagination
            background
            layout="total,prev, pager, next"
            :total="written_total"
            align="center"
            @current-change="writtenHandleCurrentChange"
            :current-page="written_currentPage"
            :page-size="written_pageSize"
            :hide-on-single-page="written_value"
            style="padding-top: 15px"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="我的面试">
        <div class="sub-li">
          <div class="sub-li-right">
            <div>
              <div class="company_img">
                <img style="width:60px;height:60px"
                     src="https://img.bosszhipin.com/beijin/upload/com/workfeel/20220411/7bf6f160950405e93ad8e7923ab65e0ffbe11dfef94ce4d5f0ae9ca6c9ad6e7580cb0497f5dfa98e.jpg?x-oss-process=image/resize,w_100,limit_0"
                     alt="">
              </div>
              <div class="company-info">
                <h3><span>美团2022校园招聘软件工程师面试</span></h3>
                <p class="company_text">
                  <span style="color:#4f4e4e;font-size:14px;padding-right: 20px">美团</span>
                  10000人以上
                  <el-divider direction="vertical"></el-divider>
                  互联网
                  <el-divider direction="vertical"></el-divider>
                  国企
                  <el-divider direction="vertical"></el-divider>
                  已上市
                </p>
              </div>
              <div class="delivery_tag"><el-tag>未开始</el-tag></div>
              <el-divider direction="horizontal"></el-divider>
              <p class="company_text" >
                面试职位：<span>Java开发工程师</span>
                <span style="float: right">面试时间 2022-05-21</span>
              </p>
            </div>
          </div>
        </div>
        <el-pagination
            background
            layout="total,prev, pager, next"
            :total="interview_total"
            align="center"
            @current-change="interviewHandleCurrentChange"
            :current-page="interview_currentPage"
            :page-size="interview_pageSize"
            :hide-on-single-page="interview_value"
            style="padding-top: 15px"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "WrittenInterview",
  data(){
    return{
      written_value:true,
      written_currentPage:1,
      written_total:10,
      written_pageSize:30,
      interview_value:true,
      interview_currentPage:1,
      interview_total:1000,
      interview_pageSize:30,
    }
  },
  methods:{
    writtenHandleCurrentChange(currentPage){
      this.currentPage = currentPage;
    },
    interviewHandleCurrentChange(currentPage){
      this.currentPage = currentPage;
    },
  }
}
</script>

<style scoped>

/deep/ .el-tabs__content {
  min-height: 435px;
  box-shadow: 0 5px 5px 0 #eceaea;
}
.sub-li {
  margin-bottom:20px;
  box-shadow: 2px 3px 0 2px rgb(0 0 0 / 10%);
}
p {
  margin: 0 0;
}

.name {
  display: inline-block;
  font-size: 18px;
  color: #428af5;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary {
  width: 20%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  display: inline-block;
  color: #fc6c38;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-text {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #8d92a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-divider--horizontal {
  height: 0.5px;
  margin: 5px 0 5px 0;
}


.company-info {
  display: inline-block;
  height: 60px;
  margin-left: 16px;
  width:600px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.delivery_tag{
  display: inline-block;
  float:right;
}
.company-info h3 {
  height: 22px;
  font-size: 18px;
  font-weight: 400;
  color: #428af5;
  line-height: 22px;
  margin: 0 0 7px 0;
  padding: 0;
}
.company_text {
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #8d92a1;
  position: relative;
}

.company_img {
  display: inline-block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  overflow: hidden;
  float: left;
}
</style>